<template>
  <div
    class="put-launch"
    :style="{ left: !isShrink ? '487px' : 0 }"
    @click="isShrink = !isShrink"
  >
    <img
      src="@/assets/images/put-launch.png"
      :style="{ transform: `rotate(${isShrink ? '-180deg' : '0'})` }"
      alt=""
    />
  </div>
  <transition name="collapse-fade-absolute-in">
    <div v-show="!isShrink" class="search-collapse">
      <!-- <el-scrollbar> -->
      <div class="collapse-title">灾害点占比</div>
      <div class="disasterChart">
        <VChart :option="chart3Doption" class="charts" ref="chartDom" />
        <!-- 底座背景 -->
        <div class="bg"></div>
      </div>
      <div class="disasterBox disasterTable">
        <div class="title">隐患点列表</div>
        <!-- <div>
            <el-table :data="latentDanger">
              <el-table-column  prop="reportTime" label="日期" ></el-table-column>
            </el-table>
          </div> -->
        <!-- <el-scrollbar> -->
        <div class="disastertable">
          <div class="header">
            <div class="row">
              <div style="width: 111px">灾害类型</div>
              <div style="width: 180px">灾害名称</div>
              <div style="width: 270px">地址</div>
            </div>
          </div>
          <div class="disasterBody">
            <div class="row" v-for="(d, i) in latentDanger" :key="i">
              <div style="width: 111px">{{ d.disasterType }}</div>
              <div style="width: 180px">{{ d.disasterName }}</div>
              <div style="width: 270px">{{ d.position }}</div>
            </div>
            <!-- <tr v-for="(d, i) in latentDanger" :key="i">
                <td>{{ d.disasterType }}</td>
                <td>{{ d.disasterName }}</td>
                <td>{{ d.position }}</td>
              </tr> -->
          </div>
        </div>
        <!-- </el-scrollbar> -->
      </div>
      <div class="disasterBox disasterChart">
        <div class="title">逐时降水预报</div>
        <div class="charbox">
          <VChart ref="chartRef" class="chart-content" :option="chartOption" />
        </div>
      </div>
      <!-- </el-scrollbar> -->
    </div>
  </transition>
</template>

<script setup lang="ts">
import 'echarts-gl'
import { getPie3D, getParametricEquation } from '../utils/sector'
import VChart from 'vue-echarts'
import apis from '../api/api'
import apiList from '@/pages/conventional-fine-forecasting/api/api'
import { usedisasterStore } from '@/pages/geological-disaster/store/store'
const disasterStore = usedisasterStore()
const isShrink = inject('isShrink')
const warningArea = ref('warningsAll')
const warnings = reactive({
  warningsAll: [],
  warningsCity: [],
  warningsCounty: []
})
const latentDanger = ref()
const disasterTableData = () => {
  apis
    .disasterTop20({
      countyCode: disasterStore.componentsVisible.countryCode,
      cityCode: disasterStore.componentsVisible.cityCode
    })
    .then(res => {
      latentDanger.value = res.data
    })
}
let piedata = []
let option = ref({
  color: [
    '#43D9FF',
    '#FFAD6E',
    '#8AA4FF',
    '#EA7C66',
    '#0A9942',
    '#FFF719',
    '#FF9CDE'
  ],
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: '62%',
      style: {
        text: piedata[0]?.name,
        textAlign: 'center',
        fill: '#727D89',
        fontSize: 10
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '53%',
      style: {
        text: piedata[0]?.value,
        textAlign: 'center',
        fill: '#F5FCFF',
        fontFamily: 'YouSheBiaoTiHei',
        fontSize: 23
      }
    }
  ],
  legend: {
    top: '5%',
    left: '9%',
    icon: 'circle',
    textStyle: {
      rich: {
        name: {
          fontSize: 14,
          color: '#CADEF9'
        },
        num: {
          fontFamily: 'YouSheBiaoTiHei',
          fontSize: 16,
          color: '#00E2FF'
        }
      }
    },
    formatter: function (name) {
      let v
      piedata.forEach(item => {
        if (item.name === name) {
          v = item.value
        }
      })
      return `{name|${name}}` + ' ' + `{num| ${v}}` ///这里
    },
    itemWidth: 10,
    itemHeight: 8,
    itemGap: 35
  },
  xAxis3D: {
    min: -1,
    max: 1
  },
  yAxis3D: {
    min: -1,
    max: 1
  },
  zAxis3D: {
    min: -1,
    max: 1
  },

  //此处是修改样式的重点
  grid3D: {
    show: false,
    boxHeight: 15, //圆环的高度
    //这是饼图的位置
    // top: '-12.5%',
    top: '5%',
    left: '0%',
    viewControl: {
      //3d效果可以放大、旋转等，请自己去查看官方配置
      // projection: 'orthographic' ,
      alpha: 30, //角度(这个很重要 调节角度的)
      distance: 180, //调整视角到主体的距离，类似调整zoom(这是整体大小)
      rotateSensitivity: 0, //设置为0无法旋转
      zoomSensitivity: 0, //设置为0无法缩放
      panSensitivity: 0, //设置为0无法平移
      autoRotate: false //自动旋转
    }
  },
  series: []
})
const chart3Doption = ref({})
const getpieData = () => {
  apis
    .disasterTypeProportionStatistics({
      countyCode: disasterStore.componentsVisible.countryCode,
      cityCode: disasterStore.componentsVisible.cityCode
    })
    .then(res => {
      piedata = res.data
      let series = getPie3D(piedata, 1.4, 1)
      option.value.series = series
      chart3Doption.value = option.value
      //chartDom
    })
}
const chartOption = ref({
  grid: {
    top: '8%',
    left: '5%',
    right: '5%',
    bottom: '5%',
    containLabel: true
  },

  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E5E6EB'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12
    }
  },
  yAxis: [
    {
      type: 'value',
      nameTextStyle: {
        color: '#000',
        fontSize: 14,
        padding: [0, 0, 0, 30]
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },

      splitLine: {
        //网格线
        show: false
      }
    }
  ],
  series: [
    {
      type: 'bar',
      barWidth: 10,
      data: [],
      itemStyle: {
        normal: {
          color: '#468DFF'
        }
      }
    }
  ]
})
const getElementHourCurve = () => {
  apiList
    .getElementHourCurve({
      elementCode: 'RAIN',
      latitude: disasterStore.componentsVisible.pos.lat,
      longitude: disasterStore.componentsVisible.pos.lng
    })
    .then(res => {
      if (res.data) {
        chartOption.value.xAxis.data = res.data.xAxis.map(item => {
          return item.substr(-2)
        })
        chartOption.value.series[0].data = res.data.yAxis
      }
    })
}
watch(
  () => disasterStore.componentsVisible.countryCode,
  (newval, oldval) => {
    if (newval) {
      disasterStore.mappointdisasterData()
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  disasterTableData()
  getpieData()
  getElementHourCurve()
})
</script>

<style scoped lang="scss">
.put-launch {
  width: 30px;
  height: 50px;
  background: rgba(0, 17, 46, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(0, 204, 255, 0.05),
    inset 0px 0px 14px 1px #00ccff;
  border-radius: 0px 10px 10px 0px;
  border: 1px solid #00a8ff;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: left 0.5s ease;
  img {
    width: 21px;
    height: 15px;
  }
}

.search-collapse {
  position: absolute;
  left: 0;
  top: 29px;
  width: 487px;
  text-align: center;
  height: calc(100% - 29px);
  background: rgba(0, 17, 46, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(0, 204, 255, 0.05),
    inset 0px 0px 14px 1px #00ccff;
  border: 1px solid #00a8ff;
  z-index: 1200;
  overflow: hidden;

  :deep(.selectrest) {
    width: 400px;
    margin-top: 16px;
    .el-select__wrapper {
      height: 38px;
      background: rgba(2, 19, 43, 0.69);
      box-shadow: inset 0px 0px 6px 1px #00b9ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(34, 249, 255, 0.23);
    }
  }

  .disasterChart {
    height: 270px;
    position: relative;
    .charts {
      z-index: 2;
      position: relative;
    }
    .bg {
      position: absolute;
      bottom: 20px;
      left: 50%;
      z-index: 0;
      width: 320px;
      height: 160px;
      background: no-repeat center;
      background-image: url('@/assets/images/chartBg.png');
      background-size: 100% 100%;
      transform: translateX(-50%) rotateX(10deg);
    }
  }

  .disasterBox {
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #ffffff;
      text-align: left;
      padding-left: 13px;
      background: url('@/assets/images/titleBg.png') no-repeat 3px;
    }
  }
  .charbox {
    height: 200px;
  }
  .disasterTable {
    height: 270px;
    padding-bottom: 30px;
    overflow-x: auto;
    // overflow: hidden;
  }
  .disastertable {
    margin: 10px 0 10px 10px;
    white-space: nowrap;
    // height: 250px;
    .header {
      height: 36px;
      .row {
        width: 100%;
        height: 36px;
        white-space: nowrap;

        div {
          color: #96adc5;
          background: url('@/assets/images/theadBg.png') no-repeat center 100%/98%;
          background-size: 97% 100%;
          text-align: center;
          line-height: 36px;
          display: inline-block;
        }
      }
    }

    .row {
      div {
        // padding: 0 28px;
        height: 36px;
        line-height: 36px;
        color: #ffffff;
        // &:last-child {
        //   text-align: left;
        // }
      }
    }
    .disasterBody {
      width: 100%;
      height: 100%;
      .row {
        height: 36px;
        div {
          text-align: center;
          line-height: 36px;
          display: inline-block;
        }
      }
    }
    .row:hover {
      background: linear-gradient(
        270deg,
        rgba(0, 121, 255, 0) 0%,
        rgba(69, 236, 255, 0.94) 100%
      );
    }
  }

  .collapse-title {
    width: 367px;
    height: 41px;
    line-height: 41px;
    font-size: 16px;
    color: #ffffff;
    margin: 19px auto 0;
    text-align: center;
    background: url('@/assets/images/warningtitle.png') no-repeat center;
  }

  .collapse-type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 21px 0;
    box-sizing: border-box;
  }
}
</style>
